<template>
	<view class="content">
		<!-- 顶部tabs -->
		<view class="top-tabs-list-box">
			<u-tabs class="u-tabs" :list="list" active-color="#181818" height="50" inactive-color="#868686" 
			:is-scroll="true" :current="current" @change="change"></u-tabs>
		</view>
		<block v-if="orderList.length>0">
		<view class="tobepaid-plate-box" v-for="(item,index) in orderList" :key="item.order_id">
			<view class="top-shop-box">
				<view class="left-shop-box flex-c-c" @click="goShop(item.mer_id)">
					<image src="../../pageMember/static/icon10.png" mode="widthFix"></image>
					<text class="ellipsis">{{item.mer_name}}</text>
					<image src="/static/cart_icon/icon1.png" mode="heightFix"></image>
				</view>
				<view class="right-status-box flex-c">{{item.status | getStatus(orderStatus,item.paid, item.refund_status)}}</view>
			</view>
			<view class="goods-item-box" v-for="(newItem,newIndex) in item.product" @click="goDetails(item.order_id)" :key="newIndex">
				<view class="left-img-box">
					<image :src="newItem.image" mode=""></image>
				</view>
				<view class="right-info-box">
					<view class="top-box">
						<text class="ellipsis">{{newItem.store_name}}</text>
						<text>x{{item.total_num}}</text>
					</view>
					<view class="center-box">{{newItem.product_sku}}</view>
					<view class="bottom-box">
						￥<text>{{newItem.product_price}}</text>
					</view>
				</view>
			</view>
			<view class="price-box">
				<text>共{{item.total_num}}件商品</text>
				<text>实付款¥{{item.pay_price}}</text>
			</view>
			<view class="bottom-but-box">
				<view @click.stop="toPend(item, 1)" class="cancel-box" style="margin-right: 0;"
					v-if="
					item.paid == 1
					&&
					(item.status == 0 || (item.status == 6 && item.refund_type == 1))"
				>
					<text>申请退款</text>
				</view>
				<view @click.stop="toPend(item, 2)" class="cancel-box"
					v-if="item.status == 1 || item.status == 2 || (item.status == 6 && item.refund_type == 2)"
				>
					<text>申请售后</text>
				</view>
				<view
					class="cancel-box"
					v-if="item.status == 2 || item.status == 3 || (item.status == 6 && item.confirm_time)"
					@click="setInvoic(item)"
				>
					<text>{{ item.invoice.status == 3? '申请开票' : '查看发票' }}</text>
				</view>
				<view
					@click.stop="evaluateFun(item.order_id)"
					class="buy-box"
					style="background: rgba(48, 48, 48, 0);border: 1rpx solid #808080;color: #000;" 
					v-if="item.status == 2 || (item.status == 6 && item.confirm_time)"
				>
					<text>评价</text>					
				</view>
				<view @click.stop="configFun(item.order_id)" class="buy-box" v-if="item.status == 1 || (item.status == 6 && item.delivery_time && !item.confirm_time)">
					<text>确认收货</text>
				</view>
				<view @click.stop="cancelFun(item.order_id)" class="cancel-box" v-if="item.paid == 0"> 
					<text>取消订单</text>
				</view>
				<view class="buy-box" v-if="item.paid == 0" @click="payNow(item)">
					<text>立即支付</text>
				</view>
			</view>
		</view>
		</block>
		<icon-status v-else :imgUrl="'../../pageMember/static/icon13.png'" :statusInfo="'暂无数据'"></icon-status>
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		components:{
			iconStatus
		},
		data(){
			return {
				list: [
					{name:'全部',id:0},
					{name:'待付款',id:1},
					{name:'待发货',id:2},
					{name:'待收货',id:3},
					{name:'已完成',id:4},
					{name:'退款/售后',id:5},
				],
				current: 0, //索引值
				orderList:[] ,//订单列表
				orderStatus: ['待发货', '待收货', '待评价', '已完成', '售后中', '售后成功', '售后失败'],
			}
		},
		onLoad(options) {
			uni.showLoading({ title: '加载中' });
			uni.setNavigationBarTitle({
				title: '产品订单列表'
			})
			this.getStoreOrderLst();
		},
		onShow() {
			this.getStoreOrderLst();
		},
		computed:{
			status() {
				let { list, current } = this;
				return list[current].id
			},
		},
		filters:{
			getStatus(status,list,paid, refund_status){
				if(paid==0){
					return '待支付';
				} else if (status == 5) {
					return refund_status == 3? '售后成功' : '售后审核通过'
				}else{
					return list[status];
				}
			}
		},
		methods:{
			// 开票
			setInvoic: function ({ order_id, invoice }) {
				const { status, file } = invoice
				if (status == 2) {
					uni.navigateTo({
						url: `/pageMember/orderDetails/showInvoicing?url=${file}`
					})
					return
				}
				uni.navigateTo({
					url: `/pageMember/orderDetails/invoicing?order_id=${order_id}&status=${status}`,
					// events: {
					// 	reload: isreload => {
					// 		isreload && this.getStoreOrderDetail(order_id)
					// 	}
					// },
					// success: res => {
					// 	res.eventChannel.emit('reload')
					// }
				})
			},
			payNow({ order_id }){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$u.api.payNowApi({order_id}).then(res=>{
					if(res.code==1){
						console.log('订单列表：',res);
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign,
						} = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp,
							nonceStr,
							package: res.data.package,
							signType,
							paySign,
							orderInfo: res.data,
							success: res => {
								uni.showModal({
									title: '支付成功',
									showCancel: false,
									success: () => {
										this.getStoreOrderLst()
									}
								})
							},
							fail: msg => {
								
							}
						})
					} else {
						uni.showToast({
							title: res.message || '获取支付参数失败',
							icon: 'none'
						})
					}
				});
			},
			getStoreOrderLst(){
				this.$u.api.storeOrderLstApi({status:this.current}).then(res=>{
					if(res.code==1){
						console.log('订单列表：',res);
						this.orderList = res.data;
					}
				});
			},
			change(index) {
				uni.showLoading({ title:'加载中',mark:true });
				this.orderList.length = 0;
				this.current = index;
				this.getStoreOrderLst();
			},
			toPend(item, refund_type, order_type = 1) {// 前往退款页面
				const param = { item, refund_type, order_type };
				uni.navigateTo({
					url: `/pageMember/orderDetails/goReturnGoods`,
					// events: {
					// 	changeStatus: isUp => {
					// 		isUp && this.getList()
					// 	}
					// },
					success: res => {
						res.eventChannel.emit('changeStatus', param)
					}
				})
			},
			configFun(order_id) {// 确认收货
				uni.showModal({
					content: '您确定要收货么?',
					confirmColor:'#000',
					success: res => {
						if (res.confirm) {
							console.log(order_id);
							this.$u.api.confirmOrderApi({order_id:order_id}).then(res=>{
								if(res.code==1){
									this.getStoreOrderLst();
									wx.showToast({
										title: '收货成功',
										icon: 'success'
									})
								}
							});
						}
					}
				})
			},
			cancelFun(orderId){ //取消订单
				uni.showModal({
					content: '您确定要取消订单吗?',
					confirmColor:'#000',
					success: res => {
						if (res.confirm) {
							this.$u.api.cancelOrderApi({
								order_id:orderId
							}).then(res=>{
								if(res.code==1){
									uni.redirectTo({
										url:`/pageMember/orderDetails/submit?status=${2}`
									})
								}
							});
						}
					}
				})
			},
			evaluateFun(order_id) {// 立即评价
				this.$gourl(`/pageMember/orderDetails/evaluate?orderId=${order_id}`);
			},
			goDetails(orderId){ //跳转待付款详情
				console.log('订单ID：',orderId);
				this.$gourl(`../../pageMember/orderDetails/orderDetails?orderId=${orderId}`);
			},
			goShop(merId){ //跳转相关门店
				this.$gourl(`../../pageIndex/storeInfo/storeDetails?merId=${merId}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		padding-top: 90rpx;
		box-sizing: border-box;
		background: #F5F5F5;
		.top-tabs-list-box {
			position: fixed;top: 0;z-index: 100;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			background: #fff;
		}
		.tobepaid-plate-box{
			width: 100%;
			padding: 50rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.top-shop-box{
				padding-bottom: 20rpx;
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				.left-shop-box{
					flex: 0.8;
					justify-content: flex-start;
					text{max-width: 460rpx;padding: 0 10rpx;}
					image{width: 35rpx; height: 35rpx;}
					image:last-child{width: 25rpx; height: 25rpx;}
				}
				.right-status-box{
					flex: 0.3;
					justify-content: flex-end;
				}
			}
			.goods-item-box{
				display: flex;
				margin-bottom: 30rpx;
				.left-img-box{
					flex: 0.2;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.right-info-box{
					flex: 0.8;
					padding-left: 20rpx;
					.top-box{
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
						display: flex;
						padding-bottom: 20rpx;
						text:first-child{flex: 0.8;}
						text:last-child{flex: 0.2;font-size: 28rpx;font-weight: 400;color: #999999;text-align: right;}
					}
					.center-box{
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						padding-bottom: 70rpx;
					}
					.bottom-box{
						font-size: 22rpx;
						font-weight: bold;
						color: #333333;
						text{font-size: 30rpx;}
					}
				}
			}
			.price-box{
				text-align: right;
				font-size: 26rpx;
				text:first-child{font-weight: 400;color: #999999;padding-right: 10rpx;}
				text:last-child{font-weight: bold;color: #333333;}
			}
			.bottom-but-box{
				padding-top: 30rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
				view{
					margin-left: 20rpx;
				}
				.cancel-box{
					padding: 10rpx 30rpx;
					font-weight: 400;
					color: #000000;
					background: rgba(48, 48, 48, 0);
					border: 1rpx solid #808080;
					border-radius: 50rpx;
				}
				.buy-box{
					padding: 10rpx 30rpx;
					background: #000;
					color: #fff;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>